<template>
  <div>
    <h1>这是根组件App.vue</h1>
    <!-- 声明一个路由链接地址 -->
   <router-link to="/home">首页</router-link>&nbsp;
   <router-link to="/movie/1">电影1</router-link>&nbsp;
   <router-link to="/movie/2">电影2</router-link>&nbsp;
   <router-link to="/movie/3">电影3</router-link>&nbsp;
   <router-link to="/about">关于</router-link>
    <!-- 声明一个路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
import MyAbout from './MyAbout.vue'
import MyHome from './MyHome.vue'
import MyMovie from './MyMovie.vue'
export default {
    name:'MyApp',
    data(){
        return{
            comName:'MyHome'
        }
    },
    components:{
        MyAbout,
        MyHome,
        MyMovie
    }
}
</script>

<style>
.router-link-active{
  color:white;
  background-color: red;
  font-weight: bold;
}

</style>